<template>
    <div :style="{height:docHeight+'px'}">
        <a-layout>
            <a-layout-header :style="{width:'100%',}" :class="[top ? 'blue_header' : 'white_header']">
                <a-row type="flex" justify="end" :style="{marginRight:'10px'}">
                    <a-col :class="{new_ant_col:!top}" :span="2" :style="{fontSize:'20px',color:'#FFFFFF'}">FAQ</a-col>
                    <a-col :class="{new_ant_col:!top}" :span="2">
                        <router-link to="/register">
                            <button :class="[top ? 'button_white':'button_blue','btn']">注册</button>
                        </router-link>
                    </a-col>
                </a-row>

            </a-layout-header>
            <a-layout-content>

                <div class="banner">
                    <el-carousel :style="{height:(docHeight-60)+'px',overflow:'hidden'}">

                        <el-carousel-item v-for="item in 3" :key="item" :style="{height:docHeight+'px'}">
                            <img :src="require('../assets/'+item+'.jpg')" alt="#" :style="{height:'100%',width:'100%'}">
                        </el-carousel-item>

                    </el-carousel>

                </div>
                <div class="login_div" :style="{marginTop:-docHeight*3/4+'px'}">
                    <div class="login_form">
                        <div class="login_title">
                            <p class="text-center">Get started for free</p>
                        </div>

                        <div class="login_form_nav">
                            <a-form id="components-form-demo-normal-login" :form="form" class="login-form"
                                @submit="handleSubmit">
                                <a-form-item :style="{marginBottom:'20px'}">
                                    <a-input size="large"
                                        v-decorator="['username',  { rules: [{ required: true, message: '请输入用户名!' }] }, ]"
                                        placeholder="用户名 / 邮箱">
                                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                                    </a-input>
                                </a-form-item>
                                <a-form-item style="{marginBottom:'20px'}">
                                    <a-input size="large"
                                        v-decorator="[  'password', { rules: [{ required: true, message: '请输入密码！' }] },  ]"
                                        type="password" placeholder="密码">
                                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                                    </a-input>
                                </a-form-item>
                                <a-form-item style="{marginBottom:'20px'}">
                                    <a-checkbox :style="{float:'left'}"
                                        v-decorator="['remember',  { valuePropName: 'checked', initialValue: true, }, ]">
                                        记住我
                                    </a-checkbox>
                                    <a class="login-form-forgot">
                                        <router-link class="login" :to="{ name: 'forget' }">忘记密码 ?
                                        </router-link>
                                    </a>
                                    <a-button style="{marginTop:'20px'}" type="primary" html-type="submit"
                                        class="login-form-button" :loading="loginBtn" :disabled="loginBtn">
                                        登 录
                                    </a-button>
                                </a-form-item>
                            </a-form>
                        </div>
                        <div class="login_three_party">
                            <span>其他登录方式</span>
                            <a>
                                <a-icon class="item-icon" type="alipay-circle"></a-icon>
                            </a>
                            <a>
                                <a-icon class="item-icon" type="taobao-circle"></a-icon>
                            </a>
                            <a>
                                <a-icon class="item-icon" type="weibo-circle"></a-icon>
                            </a>
                        </div>
                    </div>


                </div>



            </a-layout-content>
            <a-layout-footer>



            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                loginBtn: false,
                top: true,
                docHeight: 600,
            }
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, {
                name: 'normal_login'
            });
        },
        created() {
            this.docHeight = window.innerHeight;
           

        },
        methods: {
            handleSubmit(e) {
                e.preventDefault()
                const {
                    form: {
                        validateFields
                    },
                    Login
                } = this

                this.loginBtn = true

                validateFields({
                    force: true
                }, (err, values) => {
                    if (!err) {
                        // console.log('login form', values)
                        const loginParams = {
                            ...values
                        }

                        loginParams.username = values.username
                        loginParams.password = values.password

                        Login(loginParams)
                            .then(() => this.loginSuccess())
                            .catch(err => this.requestFailed(err))
                            .finally(() => {
                                this.loginBtn = false
                            })
                    } else {
                        setTimeout(() => {
                            this.loginBtn = false
                        }, 600)
                    }
                })
            },
        },

    }
</script>

<style scoped>
    *,
    html,
    body {
        padding: 0;
        margin: 0;
    }

    /*头部样式 */
    .ant-layout-header {
        min-width: 1200px;
    }

    .blue_header {
        background-color: rgb(41, 98, 255);
    }

    .white_header {
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0px -4px 8px #2c3e50;
    }

    /* 按钮样式 */
    .button_white {
        color: #FFFFFF;
        text-align: center;
    }

    .button_white:hover {
        cursor: pointer;
        background-color: #FFFFFF;
        color: rgb(41, 98, 255);
    }

    .btn {
        font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        min-width: 80px;
        font-weight: 600;
        text-transform: uppercase;
        transition: all .25s ease-out;
        user-select: none;
        border: 2px solid transparent;
        border-color: #FFFFFF;
        text-align: center;
        line-height: normal;
        background-color: rgb(41, 98, 255);
        border-radius: 4px;
        width: 100%;
        height: 40px;
    }

    .button_blue {
        color: #FFFFFF;
        border-color: rgb(41, 98, 255);
    }

    .button_blue:hover {
        cursor: pointer;
    }

    .login_div {
        position: absolute;
        z-index: 999;
        width: 100%;
        margin: 0px auto;
      
        
    }

    /*登录样式表 */

    .login_form {
        
     
        width: 400px;
        height: 400px;
        margin: 1px auto;
        background-color: #FFFFFF;
    }

    .login_form .login_title {
        margin-top: 40px;
        height: 60px;
    }

    .login_form .login_form_nav {
        width: 320px;
        height: 240px;
        margin: 40px 40px 20px 40px;
    }

    .login_form .login_title .text-center {
        position: absolute;
        margin-left: 90px;
        font-weight: bold;
        font-family: inherit;
        margin-top: 20px;
        color: #000000;
        font-size: 24px;
        text-align: center;

    }

    /*登录图标 */
    .ant-col-2 {
        color: #FFFFFF;
        font-size: 18px;
    }

    .ant-col-2:hover {
        cursor: pointer;
    }

    .new_ant_col {
        color: #2c3e50;
    }

    .logo_white {
        position: absolute;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #FFFFFF;
    }

    .logo_blue {
        position: absolute;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        color: rgb(41, 98, 255);
    }

    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }

    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }

    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }

    .login_form .login_three_party {
        margin-left: 50px;
        height: 50px;
        width: 320px;
        text-align: left;
        line-height: 22px;
    }

    .login_form .login_three_party .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.6);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;
    }

    .login_form .login_three_party .item-icon:hover {
        color: #1890ff;
    }

  
    /**尾部样式 */


    
</style>